<template>
  <div>
    <h2>个人主页</h2>
    <p><RouterLink to='/booking' class="home-link">返回</RouterLink></p>
    <div>
      <input type="file" id="fileInput" ref="fileInput">
      <button @click="importData" class="dbutton">导入</button>
      <p><strong>用户名:</strong> {{ username }}</p>
    </div>

<!--    <el-table :data="orders" style="width: 100%">-->
<!--      <el-table-column fixed prop="flightId" label="航班号" width="210" />-->
<!--      <el-table-column prop="bdestination" label="出发地" width="120" />-->
<!--      <el-table-column prop="edestination" label="目的地" width="120" />-->
<!--      <el-table-column prop="date" label="日期" width="120" />-->
<!--      <el-table-column prop="clazz" label="舱位" width="120" />-->
<!--      <el-table-column prop="seatId" label="座位号" width="120" />-->
<!--      <el-table-column prop="tickets" label="订票量" width="120" />-->
<!--      <el-table-column prop="status" label="订单状态(0候补1已定2已退订)" width="230"/>-->
<!--      <el-table-column label="操作" min-width="150">-->
<!--        <template #default="scope">-->
<!--          <el-button link type="primary" size="small" @click="cancelOrder(scope.row.id)"-->
<!--                     class="ebutton">退订</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

    <el-table :data="orders" style="width: 100%" max-height="450">
      <el-table-column fixed prop="flightId" label="航班号" width="210" />
      <el-table-column prop="bdestination" label="出发地" width="120" />
      <el-table-column prop="edestination" label="目的地" width="120" />
      <el-table-column prop="date" label="日期" width="240" />
      <el-table-column prop="clazz" label="舱位" width="120" />
      <el-table-column prop="orderUserName" label="下单用户" width="120" />
      <el-table-column prop="useUserName" label="使用用户" width="120" />
      <el-table-column prop="seatId" label="座位号" width="120" />
      <el-table-column prop="tickets" label="订票量" width="120" />
      <el-table-column prop="status" label="订单状态(0候补1已定2已退订)" width="230" />
      <el-table-column fixed="right" label="操作" min-width="150">
        <template #default="scope">
          <el-button
              link
              type="primary"
              size="small"
              @click="cancelOrder(scope.row)"
          >
            退订
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <p><button @click="logout" class="lobutton">退出登录</button></p>

  </div>
</template>

<script>
import { CancelOrder, ExcelUpload, GetUserName, LoginOut, SelectOwnOrder } from '@/api/index.js';
import { parseTime } from "../utils/time.js";

export default {
  data() {
    return {
      username: "",
      // orders: [] // 初始化为一个空数组
      orders: [
        {
          id: "",
          userName: "",
          flightId: "",
          bdestination: "",
          orderUserName: "",
          useUserName: "",
          edestination: "",
          date: parseTime(""),
          clazz: "",
          seatId: "",
          tickets: "",
          status: "",
        }
      ]

    };
  },

  mounted() {
    const userId = sessionStorage.getItem("userId");
    if (userId == null) {
      this.$router.push('/');
    }
    console.log("检验userId", userId);
    // 从后端获取用户名
    GetUserName(userId)
      .then(response => {
        console.log(response);
        this.username = response.data.data;
      })
      .catch(error => {
        console.error('获取用户名出错：', error);
      });
    // 从后端获取订单数据
    SelectOwnOrder(userId)
      .then(response => {
        this.orders = response.data.data;
        console.log('更新后的订单数据:', this.orders);
      })
      .catch(error => {
        console.error('获取订单数据出错：', error);
      });
    console.log("订单信息详情", this.orders);

  },
  methods: {
    cancelOrder(row) {
      console.log(row.id)
      if(row.status === 2){
        alert("该订单已退订");
        return;
      }
      // 向后端发送退订请求
      CancelOrder(row.id)
        .then(() => {
          // 更新本地订单状态为已退订
          const index = this.orders.findIndex(order => order.id === row.id);

          if (index > -1) {
            this.orders[index].status = 2;
          }
          alert('退订成功');
        })
        .catch(error => {
          alert('退订订单失败，请稍后再试');
          console.error('退订订单出错：', error);
        });
    },
    importData() {
      const fileInput = this.$refs.fileInput;
      if (fileInput.files.length === 0) {
        alert('请选择一个文件');
        return;
      }
      console.log('Selected file:', fileInput); // 记录文件信息
      if (!fileInput) {
        alert('文件选择错误，请重新选择文件');
        return;
      }
      if (sessionStorage.getItem("clazz") === "2") {
        const file = fileInput.files[0];
        ExcelUpload(file)
          .then(() => {
            alert('导入成功');
          })
          .catch(error => {
            alert('导入失败，请检查文件格式');
            console.error('导入数据出错：', error);
          });
      }else alert("权限不足");
    },
    logout() {
      // 向后端发送退出登录请求
      LoginOut()
        .then(() => {
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("userId");
          // 重定向到登录页面
          this.$router.push('/');
        })
        .catch(error => {
          console.error('退出登录出错：', error);
        });
    }
  }
};
</script>

<style scoped>
.lobutton {
  height: 30px;
  width: 70px;
  background-color: #383737;
  color: #dddddd;
  border-radius: 7px;

}
.lobutton:hover {
  background-color: #4c4b4b;
  /* 鼠标悬停时的背景颜色 */
}
.dbutton {
  height: 25px;
  width: 50px;
}

.home-link {
  height: 30px;
  width: 70px;
  font-size: 16px;
  color: #dddddd;
  text-decoration: none;
  /* 去除下划线 */
  padding: 5px 15px;
  /* 增加一些内边距 */
  border-radius: 7px;
  /* 增加圆角 */
  background-color: #383737;
  /* 设置背景颜色 */
  cursor: pointer;
  /* 鼠标悬停时显示小手样式 */
}

.home-link:hover {
  background-color: #4c4b4b;
  /* 鼠标悬停时的背景颜色 */
}
</style>